<template>
    <div class="page page-healthy-map page-full has-headbar">
      <van-nav-bar
      fixed
      :z-index="100"
      left-text="体质监测"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight">
        <div class="right-icon icon-list" slot="right"></div>
      </van-nav-bar>
        <el-amap class="amap-box"
        :vid="'amap-vue'"
        :plugin="plugin"
        :amap-manager="amapManager"
        :zoom="zoom"
        :center="center"
        :events="events">
          <el-amap-marker :key="index" v-for="(marker, index) in markers"
            :position="marker.position"
            :events="marker.events"
            :animation="marker.animation"
            :content="marker.content"
            :vid="marker.vid">
          </el-amap-marker>
          <el-amap-marker :position="centerMarker.position" :content="centerMarker.content"></el-amap-marker>
          <list-item class="marker-info" v-if="pointInfo.id" :point="pointInfo"></list-item>
        </el-amap>
    </div>
</template>

<script>
import { API_PHYSICAL_NEARBY } from '@/service/physical'
import ListItem from './components/ListItem'
import { mapGetters } from 'vuex'
import { AMapManager } from 'vue-amap'
let amapManager = new AMapManager()
export default {
  name: 'healthy-map',
  components: {
    ListItem
  },
  data () {
    let that = this
    return {
      points: [], // 健身圈点
      zoom: 12,
      amapManager,
      center: [], // 中心位置
      markers: [],
      events: {
        dragend: (e) => {
          let o = amapManager.getMap()
          let center = o.getCenter()
          that.setCenter(center.lng, center.lat)
          that.requestData()
        }
      },
      pointInfo: {}, // 点位信息
      plugin: [
        {
          pName: 'Geolocation',
          showButton: true,
          buttonPosition: 'LT',
          showMarker: false,
          showCircle: false,
          markerOptions: {
            content: `<img src="${require('@/assets/images/map/locate.png')}" style="width:32px;height:32px"/>`
          },
          events: {
            init (o) {
              // that.$toast.loading({
              //   mask: true,
              //   message: '定位中'
              // })
              // o.getCurrentPosition()
            },
            complete (result) {
              if (result && result.position) {
                let lng = result.position.lng
                let lat = result.position.lat
                that.setCenter(lng, lat)
                that.$store.dispatch('saveUserPosition', { lng, lat, time: Math.round(new Date() / 1000) })
                // that.requestData()
                that.$nextTick()
                // that.$toast.clear()
              }
            },
            error (result) {
              console.log('定位', result)
              if (result.info === 'NOT_SUPPORTED') {
                that.$toat('浏览器不支持定位')
              } else {
                if (result.message === 'Geolocation permission denied.') {
                  that.$toast('需要定位权限')
                } else {
                  that.$toast(result.message)
                }
              }
            }
          }
        },
        {
          pName: 'ToolBar',
          position: 'LT',
          offset: new AMap.Pixel(-1, 80)
        }
      ]
    }
  },
  mounted () {
    this.setCenter(this.userPosition.lng, this.userPosition.lat)
    this.requestData()
  },
  computed: {
    centerMarker () { // 中心点
      return {
        position: this.center,
        content: `<img src="${require('@/assets/images/map/locate.png')}" style="width:32px;height:32px"/>`
      }
    },
    ...mapGetters({
      userPosition: 'getUserPosition'
    })
  },
  watch: {
    userPosition: {
      handler (newValue) {
        this.setCenter(newValue.lng, newValue.lat)
        this.requestData()
      },
      deep: true
    }
  },
  methods: {
    setCenter (lng, lat) {
      this.$set(this.center, 0, lng)
      this.$set(this.center, 1, lat)
    },
    onClickLeft () {
      this.$router.push({ name: 'home' })
    },
    onClickRight () {
      this.$router.push({ name: 'healthy-list' })
    },
    requestData () {
      let reqData = {
        lon: this.center[0],
        lat: this.center[1]
      }
      return API_PHYSICAL_NEARBY(reqData).then(resData => {
        this.points = resData.list
        this.renderMarker()
      })
    },
    renderMarker () {
      let markers = this.points.map(point => {
        return {
          position: [point.locationlon, point.locationlat],
          vid: point.id,
          animation: 'AMAP_ANIMATION_NONE',
          content: `<img src="${require('@/assets/images/map/point_orange.png')}" style="width:27px;height:33px"/>`,
          events: {
            click: (e) => {
              this.setPointInfo(point)
            }
          }
        }
      })
      this.markers = markers
    },
    setPointInfo (point) {
      this.pointInfo = { ...point }
      // 当前选中的动画
      this.markers.forEach((item) => {
        item.animation = item.vid === point.id ? 'AMAP_ANIMATION_BOUNCE' : 'AMAP_ANIMATION_NONE'
      })
    }
  }
}
</script>

<style lang="less">
.page-healthy-map {
  .right-icon{
    display: inline-block;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    background-position: center center;
  }
  .icon-list{
    background-image: url("../../assets/images/icon_list.png");
    background-size: 42/2px 41/2px;
  }
  .amap-box{
    width: 100%;
    height: 100%;
  }
  .amap-logo,.amap-copyright{
    display: none!important;
    visibility: hidden!important;
  }
  .marker-info{
    position: fixed;
    bottom: 65/2px;
    left: 50%;
    z-index: 800;
    transform: translateX(-50%);
  }
}
</style>
